<template>
  <el-pagination
    background
    layout=" prev, pager, next, sizes, jumper"
    :page-sizes="[5, 10, 20]"
    :page-size="Number(pageSize)"
    :total="Number(total)"
    :current-page="Number(page)"
    @current-change="hPageChange"
    @size-change="hSizeChange"
    style="text-align: right; margin-top: 20px"
  >
  </el-pagination>
</template>

<script>
export default {
  props: ['total', 'page', 'pageSize'],
  methods: {
    // 页面改变
    hPageChange (page) {
    //   console.log(page)
      this.$emit('pageChange', page)
    },
    // 条数改变
    hSizeChange (pagesize) {
    //   console.log(pagesize)
      this.$emit('pageSizeChange', pagesize)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-pagination__jump {
  margin-left: 0 !important;
}
</style>
